<template>
    <div class="container mx-auto grid min-h-screen" style="grid-template-rows: auto 1fr auto;">
        <nav class="border-b py-2 mb-2">
    <ul class="flex gap-x-4">
      <li class="w-20"><RouterLink to="/">TodoList</RouterLink></li>
      <!-- <li><RouterLink to="/">Home</RouterLink></li> -->
      <li><NuxtLink to="/todos" active-class="active">待办</NuxtLink></li>
      <li><NuxtLink to="/users" active-class="active">用户</NuxtLink></li>
      <li class="ms-auto relative group">
        <a href="#" class="flex items-center">
          {{store.username}}
          <span class="ml-1 w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-gray-600 transition-transform duration-300"></span>
        </a>
        <ol class="absolute hidden group-hover:block bg-white border border-gray-300 rounded-md shadow-md py-1 w-40 right-0">
          <li class="px-4 py-2 hover:bg-gray-100">
            <NuxtLink to="/account/">用户中心</NuxtLink>
          </li>
          <li class="px-4 py-2 hover:bg-gray-100">
            <button >发布待办</button>
          </li>
          <li class="px-4 py-2 hover:bg-gray-100">
            <NuxtLink to="/account/messages">消息列表</NuxtLink>
          </li>
          <li class="px-4 py-2 hover:bg-gray-100">
            <button>退出登录</button>
          </li>
        </ol>
      </li>
    </ul>
  </nav>
        <main>
            <slot></slot>
        </main>
        <div class="border-t py-2 flex gap-x-2">
            aaaaa
        </div>
    </div>
</template>

<script setup lang="ts">
import { useAccountStore } from '~/stores/account.store';
let store = useAccountStore();

</script>

<style scoped></style>